<template>
  <div class="order-return-main">
    <div id="order-return" class="order-return" />
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getOrderData } from '@/utils/mockData'
export default {
  mixins: [],
  data() {
    return {
      msg: 'hello world'
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  mounted() {
    const orderData = getOrderData()
    const order = orderData.map(item => item.order)
    const returnData = orderData.map(item => item.returnOrder)
    const date = orderData.map(item => item.date)
    const myChart = echarts.init(document.getElementById('order-return'))
    const option = {
      title: {
        text: '订单退单柱状图',
        textStyle: {
          color: '#9aa8d4',
          fontSize: 18
        }
      },
      tooltip: {
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#ffffff'
        },
        formatter: '{a} <br /> {b} : {c}',
        borderWidth: 0,
        borderColor: 'rgba(0, 0, 0, 0)'
      },
      legend: {
        bottom: 10,
        textStyle: {
          color: '#9c9faa'
        }
      },
      xAxis: {
        type: 'category',
        data: date,
        axisLabel: {
          rotate: 30
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: true
        },
        axisTick: {
          show: true
        },
        axisLabel: {
          // color:'red',
          // fontSize:20
        },
        splitLine: {
          show: false
        }
      },

      animationEasing: 'elasticOut',
      animationDurationUpdate: function(idx) {
        // 越往后的数据时长越大
        return idx * 100
      },
      series: [
        {
          name: '订单',
          data: order,
          type: 'bar',
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#7e05e2' // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: '#b600ff' // 50% 处的颜色
              },
              {
                offset: 1,
                color: '#b704de' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        {
          name: '退单',
          data: returnData,
          type: 'bar',
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#22bff2' // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: '#24a6ff' // 50% 处的颜色
              },
              {
                offset: 1,
                color: '#2492ff' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      ]
    }

    myChart.setOption(option)
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.order-return-main{
  width: 100%;
  height: 100%;
  .order-return{
    margin: 0 auto;
    width: 900px;
    height: 400px;
    border: 1px solid red;
  }
}
</style>
